<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div class="app-container">
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#92D3FF',color:'#fff'}">

      <el-table-column align="center" min-width="100" label="保险公司名称" prop="suranceName"/>
      <el-table-column align="center" min-width="130" label="保代公司/权益服务商名称" prop="agentName"/>
      <el-table-column align="center" min-width="100" label="保理公司名称" prop="factoringName"/>
      <el-table-column align="center" min-width="100" label="共管账户号" prop="account"/>
      <el-table-column align="center" min-width="100" label="共管账户名称" prop="accName"/>
      <!--<el-table-column align="center" min-width="100" label="共管账户银行代码" prop="bankCode"/>-->
      <el-table-column align="center" min-width="100" label="共管账户开户银行名称" prop="interBankName"/>
      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"
                     @click="balance(scope.row)">余额查询
          </el-button>
          <el-button type="danger" size="mini"
                     @click="water(scope.row)">流水查询
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize"
                @pagination="getList"/>
    <el-dialog :visible.sync="editDialogVisible" title="流水明细" width="1000px" :close-on-click-modal="false">
        <div class="filter-container">
          <el-date-picker
            v-model="listQuery.startTime"
            type="datetime"
            placeholder="开始日期"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
          -
          <el-date-picker
            v-model="listQuery.endTime"
            type="datetime"
            placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
          <el-button type="primary" @click="primary">查询</el-button>
        </div>
      <el-table v-loading="listLoading1" :data="list1" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#92D3FF',color:'#fff'}">

        <el-table-column align="center" min-width="100" label="操作时间" prop="opTime"/>
        <el-table-column align="center" min-width="100" label="操作类型" prop="opType">
          <template slot-scope="scope">{{ scope.row.opType | statesFilter }}</template>
        </el-table-column>
        <el-table-column align="center" min-width="100" label="收入/支出" prop="sideType">
          <template slot-scope="scope">{{ scope.row.sideType | typeFilter }}</template>
        </el-table-column>
        <el-table-column align="center" min-width="100" label="发生金额(元)" prop="amount"/>
        <el-table-column align="center" min-width="100" label="对方账户" prop="sideAccount"/>
        <el-table-column align="center" min-width="100" label="对方账户名称" prop="sideName"/>
        <el-table-column align="center" min-width="100" label="对方银行" prop="sideBank"/>
        <el-table-column align="center" min-width="100" label="备注" prop="remark"/>
      </el-table>
      <pagination v-show="total1>0" :total="total1" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize"
                  @pagination="list1"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editDialogVisible = false">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="editDialogVisible1" title="余额查询" width="1000px" :close-on-click-modal="false">
      <el-table v-loading="listLoading2" :data="list2" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#92D3FF',color:'#fff'}">

        <el-table-column align="center" min-width="100" label="账户号" prop="account"/>
        <el-table-column align="center" min-width="100" label="当前余额" prop="balance"/>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editDialogVisible1 = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {doGet, doPost} from '@/api'
  import {cities} from '@/utils/base'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  //  import fileUp from '@/components/fileUp' // Secondary package based on el-pagination

  const FETCH_PAGE = 'accsearch.html'
  const FETCH_URL = {
    LIST: `${FETCH_PAGE}?op=acclist`,
    CREATE: `${FETCH_PAGE}?op=list`,
  }
  export default {
    name: 'accsearch',
    components: {Pagination},
    filters: {
      statesFilter(type) {
        return {
          '0': '垫资入账',
          '1': '代付出账',
          '2': '回款入账',
          '3': '利息出账',
          '4': '余额出账',
          '9': '银行费用',
        }[type]
      },
      typeFilter(type) {
        return {
          '0': '收入',
          '1': '支出',
        }[type]
      }
    },
    data() {
      return {
          pickerOptions: {
              disabledDate(time) {
                  return time.getTime() > Date.now();
              },
              shortcuts: [{
                  text: '今天',
                  onClick(picker) {
                      picker.$emit('pick', new Date());
                  }
              }, {
                  text: '昨天',
                  onClick(picker) {
                      const date = new Date();
                      date.setTime(date.getTime() - 3600 * 1000 * 24);
                      picker.$emit('pick', date);
                  }
              }, {
                  text: '一周前',
                  onClick(picker) {
                      const date = new Date();
                      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                      picker.$emit('pick', date);
                  }
              }]
          },
        list: [],
        list1: [],
        list2: [],
        total: 0,
          total1: 0,
        listLoading: true,
        listLoading1: true,
        listLoading2: true,
        listQuery: {
            page: 1,
            pageSize: 20,
            startTime: undefined,
            endTime: undefined,
        },
        dialogStatus: undefined,
        textMap: {
          update: '余额查询',
          create: '流水查询'
        },
        editDialogVisible: false,
        editDialogVisible1: false,
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        doGet(FETCH_URL.LIST, this.listQuery).then(response => {
          this.list = response.rows
          this.total = response.data.totalcount
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },
      balance(row) {
        this.editDialogVisible1 = true
        this.listLoading2 = true
        doGet('balance.html?op=search', {account: row.account}).then(response => {
          this.list2 = response.rows
          this.listLoading2 = false
        }).catch((response) => {
          this.$notify.error({
            title: '失败',
            message: response.message
          })
          this.listLoading2 = false
        })
      },
        primary() {
            let senJSON = {
                ...this.listQuery,
            }
            doGet(FETCH_URL.CREATE, senJSON).then(response => {
                this.list1 = response.rows
                this.total1 = response.data.totalcount
            }).catch(() => {
                this.total1 = 0;
            })
        },
      water(row) {
        this.editDialogVisible = true
        console.log(row)
        let senJSON = {
            ...this.listQuery,
            account: row.account
        }
//        senJSON.startTime = row.startTime
//        senJSON.endTime = row.endTime
        //senJSON.account = row.account
        this.listLoading1 = true
        doGet(FETCH_URL.CREATE, senJSON).then(response => {
          this.list1 = response.rows
            this.total1 = response.data.totalcount
          this.listLoading1 = false
        }).catch(() => {
//          this.list = []
            this.total1 = 0;
          this.listLoading1 = false
        })
      },
    }
  }
</script>
